{%extends "base.html" %}

{% block title %}System Monitor Server - Dashboard{% endblock title %}

{% block main_content %}
<!--CPU负载-->
<div class="card">
    <div class="card-body">
        <div id="cpu-usage-line"></div>
    </div>
</div>
<hr>
<!--内存消耗-->
<div class="card">
    <div class="card-body">
        <div id="mem-pie"></div>
    </div>
</div>
<hr>
<!--网速使用-->
<div class="row">
    <div class="col-6">
        <div class="card">
            <div class="card-body">
                <div id="network-download-speed"></div>
            </div>
        </div>
    </div>
    <div class="col-6">
        <div class="card">
            <div class="card-body">
                <div id="network-upload-speed"></div>
            </div>
        </div>
    </div>
</div>
{% endblock mian_content %}

{% block side_content %}
<div class="paper">
    <div class="row">
        <p ><span class="badge">System Name: {{system_name}}</span></p>
        <p><span class="badge secondary">Hostname: {{hostname}}</span></p>
        <p><span class="badge success">OS Version: {{os_version}}</span></p>
        <p><span class="badge warning">Kernel Version: {{kernel_version}}</span></p>
        <p><span class="badge danger">Distribution ID: {{distribution_id}}</span></p>
        <p><span class="badge">CPU Architecture: {{cpu_arch}}</span></p>
    </div>
</div>
<div class="paper">
    <div class="row flex-center">
        <h3>Made with ♥️ by Simon Yen</h3>
        <h4>If you like it, please <a href="https://github.com/SimonYen/System-Monitor-Server" target="_blank">⭐</a> it!
        </h4>
    </div>
</div>
{% endblock side_content %}

{%block js%}
<script src="/static/js/dashboard.js"></script>
{%endblock js%}